// 代理商充值
<template>
    <div>
        <GoBack :location='jumptext'></GoBack>
        <div class="AgentRechargeBox" v-if='!isSuccess'>
             <div class="RechargeTitle flex ">
                <div class="RechargeTitleTab tabright"  @click="AgentRechargeFun" v-if='$store.state.userInfo.member_type_int == 0'>
                    <p>会员充值</p>
                </div>
                <div class="RechargeTitleTab tableft">
                    <p>代理充值</p>
                </div>
            </div>
             <UserInfoBox></UserInfoBox>
             <div class="tabsBox">
                 <p>套餐选择<span>拥有软件使用时间，还有开户下级权限，再次续费只增加软件使用时间</span></p>
                 <div class="tabs-item-box flex">
                     <div class="item" v-for='(item,index) in DataList' :key='index' @click="onChangeTabs(index)">
                         <img :src="item.status == 1?activeUrl:activeUrlNo" alt="">
                         <p class="Num">{{item.title}}{{item.money}}</p>
                         <p class="time">{{item.content}}</p>
                     </div>
                 </div>
             </div>
            <PayBtnBox :orderInfo='res' v-on:succ='onsuccess'></PayBtnBox>
        </div>
         <RechargeSuccess v-if="isSuccess" :data='successData'></RechargeSuccess>
    </div>
</template>

<script>
const activeUrl = 'static/img/user-center/dailicz-bg.png'
const activeUrlNo = 'static/img/user-center/dailicz-bg-noactive.png'
import GoBack from '../goback'
import UserInfoBox from './assembly/userInfo'
import PayBtnBox from './assembly/payBtnBox'
import RechargeSuccess from './assembly/RechargeSuccess'
export default {
    components: {
        GoBack,
        UserInfoBox,
        PayBtnBox,
        RechargeSuccess
    },
    data () {
        return {
            activeUrl:activeUrl,
            activeUrlNo:activeUrlNo,
            DataList:[],
            res:{},
            successData:{},
            isSuccess:false,
            jumptext:null,
        }
    },
    mounted () {
        // 
        this.getObtainPackageList();
    },
    methods: {
        onChangeTabs(index){ //会员充值切换
            this.DataList.forEach((elem, i) => {
                if (i == index) {
                elem.status = 1;
                this.res = {
                    package_id:elem.id,
                    package_title:elem.title,
                    money:elem.money
                }
                 this.$emit('setorder',this.res);
                } else {
                    elem.status = 0;
                }
            });
        },
        AgentRechargeFun(){
            this.$router.push('/MembershipRecharge')
        },
        getObtainPackageList(){
            let uid = this.$store.state.userInfo.id;
            this.https('recharge/getObtainPackageList',{type:1,uid:uid})
            .then(data => {
                for(var i in data){
                    data[i].status = 0;
                    data[i].title =  data[i].title.slice(0,2);
                }
                data[0].status = 1;
                this.res = {
                    package_id:data[0].id,
                    package_title:data[0].title,
                    money:data[0].money
                }
                this.DataList = data;
                this.$emit('setorder',this.res);
            })
        },
        onsuccess(data){
           this.successData = data;
           this.isSuccess = true;
           this.jumptext = 'usercenter';
       }
    },
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/usercenter/agentrecharge.less);
</style>

